#{extends 'main.html' /}
#{set title:'首页设置' /}
<script type="text/javascript">

    var imagefile = '${imagefile}';
    var product_index = -1 ;
    $(function () {
        if(imagefile != null && imagefile != '' && imagefile != 'undefined'){
            initImg(imagefile);
            $("#addli").hide();
        }


        $(document).on('click','.open-select', function () {
            product_index = $(this).attr('product_index');
            $.popup('.popup-select1');
        });
        $(document).on('click','.popup-overlay', function () {
            $.closeModal();
        });

        $('.popup-select1 dl.one dt').click(function(){
            var firstTypeId = $(this).attr('first_type_id');
            $("#secondTypeList").empty();
            $.getJSON("/product/secondLevel", {id: firstTypeId},
                    function (data) {
                        console.log(data,data)
                        if(data.list.length > 0){
                            $.each(data.list,function(index,value){
                                $("#secondTypeList").append("<li onclick='showProduct("+value.id+")'  second_type_id='"+value.id+"'>"+value.name+"</li>");
                            })
                        }else{

                        }

                    })
            $('.popup-select1 dl.one dt').removeClass('curr');
            $(this).addClass('curr');
            $('.popup-select1 ul.three').removeClass('curr');
            $('.popup-select1 ul.two').removeClass('curr1');
            $('.popup-select1 ul.two').addClass('curr');
        });


        $.init();

    })

    function showProduct(value){
        $("#productList").empty();
        $.getJSON("/product/getProductByType", {typeId: value},
                function (data) {
                    console.log(data,data)
                    if(data.productList.length > 0){
                        //'"+value.name+"'
                        $.each(data.productList,function(index,value){
                            $("#productList").append("<li  onclick=onSetProduct("+value.id+",'"+value.name+"')  checked_product_id='"+value.id+"'>"+value.name+"</li>");

                        })
                    }else{
                    }
                })
        $('.popup-select1 ul.two li').removeClass('curr');
        $(this).addClass('curr');
        $('.popup-select1 ul.two').removeClass('curr');
        $('.popup-select1 ul.two').removeClass('curr1');
        $('.popup-select1 ul.two').addClass('curr1');
        $('.popup-select1 ul.three').addClass('curr');
    }

    function onSetProduct(id,name){
           $('#product'+product_index+'_product_id').val(id);
           $('#product'+product_index+'_product_name').val(name);
        $('.popup-select1 dl.one dt').removeClass('curr');
        $('.popup-select1 ul.three').removeClass('curr');
        $('.popup-select1 ul.two').removeClass('curr1');
           $.closeModal();
    }




    function saveRecommend() {
        $('#idForm').submit();
    }
</script>
<script type="text/javascript" src="/public/sui/js/lrz.all.bundle.js"></script>
<script type="text/javascript" src="/public/sui/js/uploadImg.js"></script>
<script type="text/javascript" src="/public/sui/js/list.js"></script>
<div class="page-group">
    <div class="page">
        <header class="bar bar-nav">
            <a href="javascript:history.go(-1);" class="icon icon-left pull-left"></a>
            <h1 class="title">添加产品版块</h1>
         #{if recommendActivity!=null }
             <a  href="javascript:;" onclick="delRecommend(${recommendActivity?.id})"  class="button button-link pull-right">删除</a>
         #{/if}
        </header>
        <section class="product_add content scroll_y">
            <div class="list-block">
                <form id="idForm" name="form1" method="post" action="/index/recommend/save">
                    <input type="hidden" name="recommendActivity.id" value="${recommendActivity?.id}">
                    <input id="IdMainImg" type="hidden" name="recommendActivity.mainImg" value="${recommendActivity?.mainImg}">
                    <ul>
                        <!-- Text inputs -->
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">主标题</div>
                                    <div class="item-input">
                                        <input type="text" name="recommendActivity.title"
                                               value="${recommendActivity?.title}"
                                               placeholder="请输入">
                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div class="item-inner">
                                    <div class="item-title label">副标题</div>
                                    <div class="item-input">
                                        <input type="text" name="recommendActivity.subtitle"
                                               value="${recommendActivity?.subtitle}" placeholder="请输入">
                                    </div>
                                </div>
                            </div>
                        </li>

                        <li>
                            <div class="item-content">
                                <div product_index="0" class="item-inner open-select" >
                                    <div class="item-title label">产品一</div>
                                    <div class="item-input">
                                        <input type="hidden" name="product0.id" value="${recommendActivity?.activityProducts?.size() > 0 ? recommendActivity?.activityProducts?.get(0)?.id : null}">
                                       <input type="hidden" id="product0_product_id" name="product0.product.id" value="${recommendActivity?.activityProducts?.size() > 0 ? recommendActivity?.activityProducts?.get(0)?.product?.id:null}">
                                       <input type="text" readonly id="product0_product_name" name="product0_product_name" value="${recommendActivity?.activityProducts?.size() > 0 ? recommendActivity?.activityProducts?.get(0)?.product?.name:''} ${recommendActivity?.activityProducts?.size() > 0 ? recommendActivity?.activityProducts?.get(0)?.product?.spec:''}">

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div  product_index="1" class="item-inner open-select">
                                    <div class="item-title label">产品二</div>
                                    <div class="item-input">
                                        <input type="hidden" name="product1.id" value="${recommendActivity?.activityProducts?.size() > 1 ? recommendActivity?.activityProducts?.get(1)?.id : null}">
                                        <input type="hidden" id="product1_product_id" name="product1.product.id" value="${recommendActivity?.activityProducts?.size() > 1 ? recommendActivity?.activityProducts?.get(1)?.product?.id:null}">
                                        <input type="text" readonly id="product1_product_name" name="product1_product_name" value="${recommendActivity?.activityProducts?.size() > 1 ? recommendActivity?.activityProducts?.get(1)?.product?.name : ''} ${recommendActivity?.activityProducts?.size() > 1 ? recommendActivity?.activityProducts?.get(1)?.product?.spec:''}">

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div product_index="2"  class="item-inner open-select">
                                    <div class="item-title label">产品三</div>
                                    <div class="item-input">
                                        <input type="hidden" name="product2.id" value="${recommendActivity?.activityProducts?.size() > 2 ? recommendActivity?.activityProducts?.get(2)?.id : null}">
                                        <input type="hidden" id="product2_product_id" name="product2.product.id" value="${recommendActivity?.activityProducts?.size() > 2 ? recommendActivity?.activityProducts?.get(2)?.product?.id : null}">
                                        <input type="text" readonly id="product2_product_name" name="product2_product_name" value="${recommendActivity?.activityProducts?.size() > 2 ? recommendActivity?.activityProducts?.get(2)?.product?.name : ''} ${recommendActivity?.activityProducts?.size() > 2 ? recommendActivity?.activityProducts?.get(2)?.product?.spec: ''}">

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div  product_index="3" class="item-inner open-select">
                                    <div class="item-title label">产品四</div>
                                    <div class="item-input">
                                        <input type="hidden" name="product3.id" value="${recommendActivity?.activityProducts?.size() > 3 ? recommendActivity?.activityProducts?.get(3)?.id : null}">
                                        <input type="hidden" id="product3_product_id" name="product3.product.id" value="${recommendActivity?.activityProducts?.size() > 3 ? recommendActivity?.activityProducts?.get(3)?.product?.id : null}">
                                        <input type="text" readonly id="product3_product_name" name="product3_product_name" value="${recommendActivity?.activityProducts?.size() > 3 ? recommendActivity?.activityProducts?.get(3)?.product?.name: ''} ${recommendActivity?.activityProducts?.size() > 3 ? recommendActivity?.activityProducts?.get(3)?.product?.spec: ''}">

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div  product_index="4"  class="item-inner open-select">
                                    <div class="item-title label">产品五</div>
                                    <div class="item-input">
                                        <input type="hidden" name="product4.id" value="${recommendActivity?.activityProducts?.size() > 4 ? recommendActivity?.activityProducts?.get(4)?.id : null}">
                                        <input type="hidden" id="product4_product_id" name="product4.product.id" value="${recommendActivity?.activityProducts?.size() > 4 ? recommendActivity?.activityProducts?.get(4)?.product?.id : null}">
                                        <input type="text" readonly id="product4_product_name" name="product4_product_name" value="${recommendActivity?.activityProducts?.size() > 4 ? recommendActivity?.activityProducts?.get(4)?.product?.name : ''} ${recommendActivity?.activityProducts?.size() > 4 ? recommendActivity?.activityProducts?.get(4)?.product?.spec: ''}">

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content">
                                <div  product_index="5"  class="item-inner open-select">
                                    <div class="item-title label">产品六</div>
                                    <div class="item-input">
                                        <input type="hidden" name="product5.id" value="${recommendActivity?.activityProducts?.size() > 5 ? recommendActivity?.activityProducts?.get(5)?.id : null}">
                                        <input type="hidden" id="product5_product_id" name="product5.product.id" value="${recommendActivity?.activityProducts?.size() > 5 ? recommendActivity?.activityProducts?.get(5)?.product?.id : null}">
                                        <input type="text" readonly id="product5_product_name" name="product5_product_name" value="${recommendActivity?.activityProducts?.size() > 5 ? recommendActivity?.activityProducts?.get(5)?.product?.name : ''} ${recommendActivity?.activityProducts?.size() > 5 ? recommendActivity?.activityProducts?.get(5)?.product?.spec:''}">

                                    </div>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="item-content item-link">
                                <div class="item-inner">
                                    <div class="item-title label">标题背景</div>
                                    *{<div class="item-after">}*
                                        *{<img name="recommendActivity.mainImg" src="/public/sui/images/2w.jpg"/>}*
                                    *{</div>}*
                                </div>
                            </div>

                        </li>
                        <li>

                            <div class="content-block uploadPic">
                                *{<h3>标题背景</h3>}*
                                <input type="file" accept="image/*" id="cameraInput" name="cameraInput"
                                       style="display:none;"/>
                                <input type="file" accept="image/*" id="cameraInput_andriod" name="cameraInput_andriod"
                                       style="display:none;"/>
                                <ul style="padding-left: 0">
                                    <li id="addli" class="add create-actions" style="width:100%;">
                                        <img  src="/public/sui/images/img_add1.png">
                                    </li>
                                </ul>
                            </div>
                        </li>
                    </ul>

                </form>
            </div>

            <div class="content-block">

                <a href="#" class="button button-big button-fill button-success open-about" onclick="saveRecommend()">保存</a>
                <p>注：每行三款产品，最多设置六款，建议设置三款或六款</p>
            </div>
        </section>

    #{include 'footer.html'/}
    </div>
</div>
<div id="img_tmp" style="display: none; padding-left: 0">
    <li class="img" style="width:100%;">
        <a href="#"><i class="iconfont">&#xe6d3;</i></a>
        <img src="" id="img_src"/>
        <input type="hidden" class="imgs" id="img_src_hidden" value="imgSrc"/>
    </li>
</div>
<!-- About Popup -->
<div class="popup popup-select1" style="top:30%; height:70%;">
    <div class="popup_con">
        <dl class="one scroll_y">
            #{if firstTypeList != null && firstTypeList.size() > 0 }
                #{list firstTypeList , as:'firstType'}
                    <dt first_type_id="${firstType?.id}" >${firstType?.name}</dt>
                #{/list}
            #{/if}
        </dl>
        <ul class="two scroll_y" id="secondTypeList">



        </ul>
        <ul class="three scroll_y" id="productList">


        </ul>

    </div>
</div>


<script type="text/javascript">
    $.init();
</script>

